<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
  <!--   <h1>三级联动</h1>
    <p>
        1.创建三个省市县的下拉单select
        2.引入./area.js，城市代码。
        3.引入标签元素，获取城市信息
        4.获取下拉框选中项的索引值，根据索引值获取对应的数组。
        5.当点击省份的时候，后面的市县跟着变化，当拉市的时候，县发生变化，
    </p> -->
    省:
    <select name="" id=""></select>
    市:
    <select name="" id=""></select>
    县:
    <select name="" id=""></select>

    <script src="./area.js"></script>
    <script>
        // place = {}
        // console.log(place.data);
        var sel = document.querySelectorAll("select");
        var str = "";
        place.data.forEach(function (item) {
            str += ` <option value="">${item.provname}</option>`
        });
        sel[0].innerHTML = str;

        
        sel[0].onchange = run1;
        sel[1].onchange = run2;


        run1()
        function run1() {
            var str = "";
            // 默认获取第一个对象下的city数组
            // 事实 是获取第一个下拉框选中选中项的索引值
            // 根据索引值获取对应的数组
            var i = sel[0].selectedIndex;//获取下拉框选中项的索引值
            var arr = place.data[i].city;
            arr.forEach(function (item) {
                str += ` <option value="">${item.cityname}</option>`
            });
            sel[1].innerHTML = str;
            run2()
        }

        function run2() {
            var str = "";
            var i = sel[0].selectedIndex;
            var j = sel[1].selectedIndex;
            var arr = place.data[i].city[j].dist;
            arr.forEach(function (item) {
                str += `<option value="">${item}</option>`
            });
            sel[2].innerHTML = str;
        }

    </script>
</body>

</html>